<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自助式分析系统-一键分析</title>
</head>
<style>
    #chart1, #chart2, #chart3, #chart4, #chart5, #chart6{
        width: 150vh;
        height: 70vh;
        border: 1px solid black;
    }
</style>
<body>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
    <div id="chart4"></div>
    <div id="chart5"></div>
    <div id="chart6"></div>
</body>
<script src="/js/echarts.js"></script>
<script>
    var chart1 = echarts.init(document.getElementById('chart1'));
    var option1 = {
        title:{
            text: '吞吐量Top20的城市',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['出港', '入港'],
            orient: 'vertical',
            left: 'left',
            textStyle: {
              color: "rgba(255, 255, 255, 1)"
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            type: 'value'
        },
        dataset: {
            // 提供一份数据。
            source: {{source1|safe}}
        },
        series: [
            {
                name: '出港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
            },
            {
                name: '入港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
            }
        ]
    };
    chart1.setOption(option1);

    var chart2 = echarts.init(document.getElementById('chart2'));
    var option2 = {
        title:{
            text: '吞吐量Top20的机场',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['出港', '入港'],
            orient: 'vertical',
            left: 'left',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            type: 'value'
        },
        dataset: {
            // 提供一份数据。
            source: {{source2|safe}}
        },
        series: [
            {
                name: '出港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
            },
            {
                name: '入港',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
            }
        ]
    };
    chart2.setOption(option2);

    var chart3 = echarts.init(document.getElementById('chart3'));

    var option3 = {
            title: {
                text: '承运日期,旅客量,主舱位是F和C的旅客量,团队旅客量,常旅客量'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                    orient: 'vertical',
                    right:'right'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
            },
            yAxis: {
                type: 'value'
            },
            dataset:{
                source: {{source3|safe}}
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                },
                {
                    type: 'inside',
                    realtime: true,
                }
            ],
            series: [
                {
                    name: 'pax_qty',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: 'fc_pax_qty',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: 'grp_pax_qty',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: 'ffp_pax_qty',
                    type: 'line',
                    stack: '1',
                }
            ]
        };
    chart3.setOption(option3);
    var chart4 = echarts.init(document.getElementById('chart4'));

    var option4 = {
            title: {
                text: '航班号,旅客量,主舱位是F和C的旅客量,团队旅客量,常旅客量'
            },
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                },
                {
                    type: 'inside',
                    realtime: true,
                }
            ],
            legend: {
                    orient: 'vertical',
                    right:'right'
                },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{
                    rotate: 90,
                }
            },
            yAxis: {
                type: 'value'
            },
            dataset:{
                source: {{source4|safe}}
            },
            series: [
                {
                    name: 'pax_qty',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: 'fc_pax_qty',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: 'grp_pax_qty',
                    type: 'line',
                    stack: '1',
                },
                {
                    name: 'ffp_pax_qty',
                    type: 'line',
                    stack: '1',
                }
            ]
        };
    chart4.setOption(option4);
    var chart5 = echarts.init(document.getElementById('chart5'));
    var option5 = {
            title: {
                text: '旅客量,每旅客分摊收入'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                orient: 'vertical',
                right:'right'
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                },
                {
                    type: 'inside',
                    realtime: true,
                }
            ],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{
                    rotate: 90,
                }
            },
            yAxis: {
                type: 'value'
            },
            dataset:{
                source: {{source5|safe}}
            },
            series: [
                {
                    name: 'net_amt',
                    type: 'bar',
                    stack: '1',
                }
            ]
        };
    chart5.setOption(option5);
    var chart6 = echarts.init(document.getElementById('chart6'));
    var option6 = {
                title: {
                    text: '航班航线 ,旅客量'
                },
                tooltip: {
                    trigger: 'axis'
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                    },
                    {
                        type: 'inside',
                        realtime: true,
                    }
                ],
                legend: {
                    orient: 'vertical',
                    right:'20'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel:{
                        rotate: 90,
                    }
                },
                yAxis: {
                    type: 'value'
                },
                dataset:{
                    source: {{source6|safe}}
                },
                series: [
                    {
                        name: 'pax_qty',
                        type: 'bar',
                        stack: '1',
                    }
                ]
            };
    chart6.setOption(option6);
</script>
</html>